'use client';

import { useState, useEffect } from 'react';
import styled from 'styled-components';

// 样式组件
const WeatherContainer = styled.div`
  display: flex;
  flex-direction: column;
  padding: 10px 0;
`;

const WeatherHeader = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
`;

const CityName = styled.div`
  font-size: 18px;
  color: white;
  font-weight: bold;
`;

const CurrentDate = styled.div`
  font-size: 14px;
  color: #a0cfff;
`;

const WeatherMain = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: 15px;
`;

const Temperature = styled.div`
  font-size: 32px;
  font-weight: bold;
  color: white;
  margin-right: 15px;
`;

const WeatherIcon = styled.div`
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 10px;
`;

const WeatherDesc = styled.div`
  display: flex;
  flex-direction: column;
`;

const WeatherStatus = styled.div`
  font-size: 16px;
  color: white;
`;

const FeelsLike = styled.div`
  font-size: 14px;
  color: #a0cfff;
`;

const WeatherDetails = styled.div`
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
`;

const DetailItem = styled.div`
  display: flex;
  align-items: center;
`;

const DetailLabel = styled.span`
  font-size: 14px;
  color: #a0cfff;
  margin-right: 5px;
`;

const DetailValue = styled.span`
  font-size: 14px;
  color: white;
`;

// 模拟天气数据
const weatherData = {
  city: '江门市',
  temperature: 28,
  feelsLike: 30,
  weatherStatus: '多云',
  weatherIcon: '☁️',
  humidity: 65,
  pressure: 1013,
  visibility: 10,
  windSpeed: 3.5,
  windDirection: '东南',
  sunrise: '06:12',
  sunset: '18:33',
};

export default function WeatherInfo() {
  const [currentDate, setCurrentDate] = useState('');
  const [currentTime, setCurrentTime] = useState('');

  useEffect(() => {
    // 获取当前日期和时间
    const updateDateTime = () => {
      const now = new Date();
      const dateOptions: Intl.DateTimeFormatOptions = { 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric', 
        weekday: 'long' 
      };
      const timeOptions: Intl.DateTimeFormatOptions = { 
        hour: '2-digit', 
        minute: '2-digit', 
        second: '2-digit', 
        hour12: false 
      };
      
      setCurrentDate(now.toLocaleDateString('zh-CN', dateOptions));
      setCurrentTime(now.toLocaleTimeString('zh-CN', timeOptions));
    };

    // 初始更新
    updateDateTime();

    // 每秒更新一次时间
    const interval = setInterval(updateDateTime, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <WeatherContainer>
      <WeatherHeader>
        <CityName>{weatherData.city}</CityName>
        <CurrentDate>{currentDate}</CurrentDate>
      </WeatherHeader>

      <WeatherMain>
        <Temperature>{weatherData.temperature}°C</Temperature>
        <WeatherIcon>{weatherData.weatherIcon}</WeatherIcon>
        <WeatherDesc>
          <WeatherStatus>{weatherData.weatherStatus}</WeatherStatus>
          <FeelsLike>体感温度: {weatherData.feelsLike}°C</FeelsLike>
        </WeatherDesc>
      </WeatherMain>

      <WeatherDetails>
        <DetailItem>
          <DetailLabel>湿度:</DetailLabel>
          <DetailValue>{weatherData.humidity}%</DetailValue>
        </DetailItem>
        <DetailItem>
          <DetailLabel>气压:</DetailLabel>
          <DetailValue>{weatherData.pressure} hPa</DetailValue>
        </DetailItem>
        <DetailItem>
          <DetailLabel>能见度:</DetailLabel>
          <DetailValue>{weatherData.visibility} km</DetailValue>
        </DetailItem>
        <DetailItem>
          <DetailLabel>风速:</DetailLabel>
          <DetailValue>{weatherData.windSpeed} m/s</DetailValue>
        </DetailItem>
        <DetailItem>
          <DetailLabel>风向:</DetailLabel>
          <DetailValue>{weatherData.windDirection}</DetailValue>
        </DetailItem>
        <DetailItem>
          <DetailLabel>日出/日落:</DetailLabel>
          <DetailValue>{weatherData.sunrise}/{weatherData.sunset}</DetailValue>
        </DetailItem>
      </WeatherDetails>
      
      <div style={{ textAlign: 'center', marginTop: '15px', color: '#a0cfff', fontSize: '16px' }}>
        {currentTime}
      </div>
    </WeatherContainer>
  );
} 